<template>
  <div>
    <el-button @click="logout">退出</el-button>
    <el-button @click="getSrc">通过外联直接的src</el-button>
    <h2>
      456
    </h2>
      <ul>
        <li v-for="(item,index) in $store.state.datalist" :key="index">
          <img :src="item.poster" alt="">
          <p>
            {{item.name}}
          </p>
        </li>
      </ul>
  </div>


</template>

<script>
export default {
  data() {
    return {
      datalist: [],
      timer:null,
    };
  },

  head(){
   return {
     meta:[
      {
        name:"这是主页",content:"迎请，疫情"
      }
    ]
   }
  },

  async asyncData({ $axios, store, error }) {
       let data=await $axios({
         url:
        "https://m.maizuo.com/gateway?cityId=510100&pageNum=1&pageSize=10&type=1&k=7904682",
      method: "get",
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"1606962163804279870816257"}',
        "X-Host": "mall.film-ticket.film.list",
      },
    })

    store.commit("setdatalist",data.data.films)

    // return {
    //    datalist:data.data.films,
    // }
  },

mounted(){

  },

  methods: {
    sleep(num=5000){
    clearTimeout(this.timer)
    return new Promise((res)=>{
        this.timer=setTimeout(()=>{res()},num)
    })
},
   async getaaa(){

         let data=await this.$axios({
         url:
        "https://m.maizuo.com/gateway?cityId=510100&pageNum=1&pageSize=10&type=1&k=7904682",
      method: "get",
      headers: {
        "X-Client-Info":
          '{"a":"3000","ch":"1002","v":"5.0.4","e":"1606962163804279870816257"}',
        "X-Host": "mall.film-ticket.film.list", 
      },
    })

    store.commit("setdatalist1",data.data.films)
    },
    getSrc(){
      console.log($)
    },
    logout() {
      this.$cookies.remove("userdata");
      this.$store.commit("setUserData", null);
      this.$message.success("退出成功")
      this.$router.replace("/user/login")
    },
  },
};
</script>

<style scoped>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

img {
  max-width: 100px;
}
</style>
